<template>
    <view>
        <u-navbar title="搜索结果" :autoBack="true" :placeholder="true">
        </u-navbar>
        <view class="main">
            <view class="topFun">
                <view class="searchBox">
                    <u-input class="input" confirmType="search" v-model="keyword" clearable prefixIcon="search"
                        placeholder="搜索书籍或用户" @confirm="searchBook"></u-input>
                    <u-button class="button" @click="back">取消</u-button>
                </view>
                <u-tabs :list="list" itemStyle="width:5rem;height:3rem;" @click="choose"></u-tabs>
                <view class="filter" v-if="activeCategory == 0">
                    <span class="newSort" :class="{ activeSortText: activeSortText == 0 }" @click="newest">最新</span>
                    <span class="hotSort" :class="{ activeSortText: activeSortText == 1 }" @click="hottest">最热</span>
                    <view class="priceSort" :class="{ activeSortText: activeSortText == 2 }" @click="priceSortHandle">
                        <span>价格</span><i v-if="priceSort" class="iconfont icon-jiangxu"></i> <i v-else
                            class="iconfont icon-shengxu"></i>
                    </view>
                </view>
            </view>
            <view v-if="activeCategory == 0" class="searchResult">
                <view v-if="searchResult.length > 0">
                    <view class="searchItem" v-for="item, index in searchResult" :key="index"
                        @click="goBookDetail(item)">
                        <u--image height="7rem" width="5rem" :src="item.coverImage"></u--image>
                        <view class="bookInfo">
                            <view class="topBox">
                                <view class="bookNS">
                                    <view class="bookName">{{ item.bookTitle }}</view>
                                    <view class="bookScore">豆瓣评分：{{ item.score }}</view>
                                </view>
                                <view class="bookAuthor">作者：{{ item.author }}</view>
                                <view class="bookPublisher">出版社：{{ item.publisher }}</view>
                            </view>
                            <view class="bottomBox">
                                <view class="bookOldPrice">￥{{ item.price }}</view>
                                <view class="bookPrice">￥{{ item.curprice }}</view>
                                <button v-if="userInfo.id != item.userId" type="primary" class="button" plain="true"
                                    @click.stop="addCart(index)" :disabled="isCart(item.id) == '已加入购物车'">{{
                                            isCart(item.id)
                                    }}</button>
                                <button v-else class="button" type="primary" plain="true"
                                    @click.stop="goEditBook(item)">编辑我的书</button>
                            </view>
                        </view>

                    </view>
                </view>
                <u-empty v-else mode="search" marginTop="50%"></u-empty>
            </view>
            <view v-else class="userList">
                <view v-if="userList.length > 0">
                    <view class="userItem" v-for="item, index in userList" :key="index">
                        <u-image shape="circle" height="3rem" width="3rem" :src="item.avatar"></u-image>
                        <view class="userInfo">
                            <view class="userName">{{ item.nickName }}</view>
                            <view class="userFans">{{ item.fansNum }}粉丝</view>
                        </view>
                        <u-button v-if="!item.isFollow" class="focusButton" iconColor="white" icon="plus" size="small"
                            @click="focusUser(index)">关注</u-button>
                        <u-button v-else class="notFocusButton" size="small" @click="focusUser(index)">已关注</u-button>
                    </view>
                </view>
                <u-empty v-else mode="search" marginTop="50%"></u-empty>
            </view>
        </view>
    </view>
</template>

<script>
import { mapGetters } from 'vuex'
import _ from 'lodash'
export default {
    mounted() {
        this.keyword = this.$Route.query.keyword
        console.log(this.searchResult)
    },
    computed: {
        ...mapGetters(['searchResult', 'userInfo', 'userList']),
        isCart() {
            return function (id) {
                let cart = this.$store.state.cart.cart || []
                let result = cart.some(item => {
                    return item.bookId == id
                })
                return result ? '已加入购物车' : '加入购物车'
            }
        }
    },
    data() {
        return {
            keyword: '',//搜索关键字
            activeCategory: 0,//当前选中的类型
            priceSort: true,//价格排序
            activeSortText: 0,//当前选中的排序方式
            list: [{ id: 0, name: '书籍' }, { id: 1, name: '用户' }],
            // userList: [
            //     {
            //         id: 1,
            //         userName: '六月',
            //         userImg: 'http://182.61.31.180:3000/File/Images/ImgHeaders/7_1650554889031_1650554887181_1896498736.jpeg',
            //         fansNum: '100',
            //         isFollow: true
            //     }
            // ],
            cartText: '加入购物车',//加入购物车按钮文字

        }
    },
    methods: {
        goEditBook(book) {
            console.log('编辑书籍')
            console.log(book)
            this.$store.commit('SET_CURRENT_BOOK', book)
            this.$Router.push({
                name: 'entryBooks'
            })
        },
        goBookDetail(book) {
            // 查看书籍详情
            this.$store.dispatch('getBookDetail', book.id).then(res => {
                if (res == 'success') {
                    this.$Router.push({
                        name: 'detail'
                    })
                }
            })
        },
        focusUser:_.throttle(function(index){
            let data = this.userList[index].isFollow
            if (!data) {
                this.$store.dispatch('followUser', index).then(res => {
                    if (res == 'success')
                        this.$tools.toast('关注成功')
                    else
                        this.$tools.toast('关注失败')

                })
            } else {
                this.$store.dispatch('unFollowUser', index).then(res => {
                    if (res = 'success')
                        this.$tools.toast('取消关注成功')
                    else
                        this.$tools.toast('取消关注失败')
                })
            }
        },1000),
        addCart(index) {
            let data = {
                bookId: this.searchResult[index].id,
                bookTitle: this.searchResult[index].bookTitle,
                author: this.searchResult[index].author,
                price: this.searchResult[index].curprice,
                postage: this.searchResult[index].postage,
                coverImage: this.searchResult[index].coverImage
            }
            this.$store.dispatch('addCart', data)
            this.cartText = '已加入购物车'


        },
        newest() {
            // 如果点击的选项是当前选项就返回
            if (this.activeSortText == 0 || !this.keyword)
                return;
            this.$store.dispatch('searchNewList', this.keyword)
            this.activeSortText = 0
            this.priceSort = true

        },
        hottest() {
            // 如果点击的选项是当前选项就返回
            if (this.activeSortText == 1 || !this.keyword)
                return;
            console.log(this.keyword)
            this.$store.dispatch('searchHotList', this.keyword)
            this.activeSortText = 1
            this.priceSort = true
        },
        priceSortHandle() {
            if (this.activeSortText == 2) {
                this.priceSort = !this.priceSort
                if (this.priceSort)
                    this.$store.dispatch('searchPriceDescList', this.keyword)
                else
                    this.$store.dispatch('searchPriceAsecList', this.keyword)
            } else {
                this.$store.dispatch('searchPriceDescList', this.keyword)
                this.activeSortText = 2
                this.priceSort = true
            }
        },
        choose(item) {
            this.activeCategory = item.id
            if (!this.keyword)
                return;
            if (item.name == '用户') {
                this.$store.dispatch('searchUser', this.keyword)
            } else {
                this.$store.dispatch('searchNewList', this.keyword)
                this.activeSortText = 0
                this.priceSort = true
            }
        },
        searchBook(searchText) {
            if (this.activeCategory == 0) {
                this.$store.dispatch('searchNewList', searchText)
                this.activeSortText = 0
            } else {
                this.$store.dispatch('searchUser', this.keyword)
            }
        },
        back() {
            this.$Router.back()
        }
    }
}
</script>

<style lang="scss">
page {
    height: 100%;
    background: white;

    .main {
        padding: 0.5rem 0;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;

        .topFun {
            width: 100%;
            padding: 0.5rem 0;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;

            .searchBox {
                height: 3rem;
                width: 95%;
                display: flex;
                flex-direction: row;

                .input {
                    width: 90%;
                    height: 60%;
                    border-radius: 2rem;
                    padding: 0.5rem;
                    box-shadow: 0 0 0.2rem 0 rgba(0, 0, 0, 0.1);
                }

                .button {
                    width: 13%;
                    height: 90%;
                    border-radius: 0.5rem;
                    border: none;
                    padding: 0.5rem;
                    background-color: transparent;
                    border: 0;
                }
            }

            .category {
                display: flex;
                flex-direction: row;
                justify-content: space-around;
                align-items: center;
                width: 95%;

                .categoryItem {
                    height: 2rem;
                    margin-top: 0.5rem;
                    font-size: 1rem;
                    display: inline-block;
                    // padding-bottom: 0.5rem;
                }

                .activeCategoryItem {
                    border-bottom: 2px solid #ccc;
                }

            }

            .filter {
                display: flex;
                flex-direction: row;
                justify-content: space-around;
                align-items: center;
                margin-top: 0.5rem;
                width: 95%;
                // 底部阴影
                box-shadow: 0px 10px 5px -10px #ccc;

                .newSort,
                .priceSort,
                .hotSort {
                    margin-top: 0.5rem;
                    font-size: 0.8rem;
                    display: inline-block;
                    padding-bottom: 0.5rem;

                    i {
                        font-size: 0.8rem;
                        margin-left: 0.2rem;
                    }
                }

                .activeSortText {
                    color: #ff5a5f;
                }
            }

        }

        .searchResult {
            width: 90%;
            height: 100%;
            display: flex;
            flex-direction: column;
            justify-content: center;

            .searchItem {
                display: flex;
                justify-content: flex-start;
                align-items: center;
                flex-direction: row;
                padding-bottom: 1rem;
                border-bottom: 1px solid #ccc;

                .bookInfo {
                    width: 100%;
                    display: flex;
                    flex-direction: column;
                    align-items: space-around;

                    .topBox {
                        margin-left: 1rem;
                        font-size: 0.8rem;
                        color: #999;

                        .bookNS {
                            display: flex;
                            flex-direction: row;
                            justify-content: space-between;
                            align-items: center;
                            width: 100%;
                            height: 2rem;
                            padding: 0.5rem;

                            .bookName {
                                font-size: 1rem;
                                font-weight: bold;
                                color: #333;
                            }

                            .bookScore {
                                font-size: 0.8rem;
                                color: #999;
                            }
                        }



                    }

                    .bottomBox {
                        margin-left: 1rem;
                        display: flex;
                        flex-direction: row;
                        justify-content: space-between;

                        .bookPrice {
                            margin-left: 0.5rem;
                            font-size: 0.8rem;
                            color: $uni-color-theme-6;
                        }

                        .bookOldPrice {
                            font-size: 0.8rem;
                            color: #999;
                            font-style: italic;
                            text-decoration: line-through;
                        }

                        .button {
                            margin-right: 1rem;
                            // background: $uni-color-theme-11;
                            // color: white;
                            font-size: 0.5rem;
                            display: flex;
                            flex-direction: row;
                            justify-content: center;
                            align-items: center;
                        }
                    }


                }


            }

        }

        .userList {
            display: flex;
            flex-direction: column;
            justify-content: center;
            width: 90%;

            .userItem {
                width: 100%;
                display: flex;
                flex-direction: row;
                justify-content: space-between;
                align-items: center;
                border-bottom: 1px solid #ccc;
                padding-bottom: 0.5rem;

                .userInfo {
                    margin-left: 1rem;
                    width: 100%;

                    .userName {
                        font-size: 0.8rem;
                        color: #333;
                    }

                    .userFans {
                        font-size: 0.8rem;
                        color: #999;
                    }
                }

                .focusButton {
                    color: white;
                    background: $uni-color-theme-6;
                    width: 6rem;
                }

                .notFocusButton {
                    color: white;
                    background: $uni-color-theme-7;
                    width: 6rem;
                }
            }
        }
    }
}
</style>